<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>首页</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/admin/js/jquery-3.5.0.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/admin/js/avalon.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/admin/js/javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/admin/css/admin.css"/>
</head>
<body>
<div class="wrap-container welcome-container">
    <div class="row">
        <div class="welcome-left-container col-lg-9">
            <div class="data-show">
                <ul class="clearfix">
                    <li class="col-sm-12 col-md-4 col-xs-12">
                        <a href="${pageContext.request.contextPath}/admin/userList.do" class="clearfix">
                            <div class="icon-bg bg-org f-l">
                                <span class="iconfont">&#xe606;</span>
                            </div>
                            <div class="right-text-con">
                                <p class="name">用户数</p>
                                <p><span class="color-org">${userTotal}</span>位</p>
                            </div>
                        </a>
                    </li>
                    <li class="col-sm-12 col-md-4 col-xs-12">
                        <a href="${pageContext.request.contextPath}/admin/dictionaryList.do" class="clearfix">
                            <div class="icon-bg bg-blue f-l">
                                <span class="iconfont">&#xe602;</span>
                            </div>
                            <div class="right-text-con">
                                <p class="name">词库单词数</p>
                                <%--                                <p><span class="color-blue">189</span>数据<span class="iconfont">&#xe628;</span></p>--%>
                                <p><span class="color-blue">${dictionaryTotal}</span>个</p>
                            </div>
                        </a>
                    </li>
                    <li class="col-sm-12 col-md-4 col-xs-12">
                        <a href="${pageContext.request.contextPath}/admin/toFeedback.do" class="clearfix">
                            <div class="icon-bg bg-green f-l">
                                <span class="iconfont">&#xe605;</span>
                            </div>
                            <div class="right-text-con">
                                <p class="name">反馈数</p>
                                <p><span class="color-green">${feedBackTotal}</span>条</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <!--图表-->
            <div class="chart-panel panel panel-default">
                <div class="panel-body" id="chart" style="height: 376px;">
                </div>
            </div>
            <!--服务器信息-->
            <div class="server-panel panel panel-default">
                <div class="panel-header">服务器信息</div>
                <div class="panel-body clearfix">
                    <div class="col-md-2">
                        <p class="title">服务器环境</p>
                        <span class="info">Tomcat 9.0.54(Win64) JDK 1.8_144</span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">服务器IP地址</p>
                        <span class="info">127.0.0.1</span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">服务器域名</p>
                        <span class="info">localhost:8080</span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">JDK版本</p>
                        <span class="info">1.8_144</span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">数据库信息</p>
                        <span class="info">MySQL-8.0</span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">服务器当前时间</p>
                        <span id="manatime" class="info"></span>
                    </div>
                </div>
            </div>
            <%--  系统技术版本  --%>
<%--            <div class="server-panel panel panel-default">--%>
<%--                <div class="panel-header">系统技术版本</div>--%>
<%--                <div class="panel-body clearfix">--%>
<%--                    <div class="col-md-2">--%>
<%--                        <p class="title">前端</p>--%>
<%--                        <p class="title">后端</p>--%>
<%--                    </div>--%>
<%--                    <div class="col-md-2">--%>
<%--                        <span class="info">Vue-2.x</span>--%>
<%--                        <span class="info">Spring-5.2.2</span>--%>
<%--                    </div>--%>
<%--                    <div class="col-md-2">--%>
<%--                        <span class="info">Bootstrap-3.x/4.x</span>--%>
<%--                        <span class="info">Mybatis-3.5.3</span>--%>
<%--                    </div>--%>
<%--                    <div class="col-md-2">--%>
<%--                        <span class="info">Layui-v2.5.7</span>--%>
<%--                        <span class="info">Mybatis-Spring 2.0.3</span>--%>
<%--                    </div>--%>
<%--                    <div class="col-md-2">--%>
<%--                        <span class="info">JQuery-3.5.0</span>--%>
<%--                        <span class="info">Maven-3.8.3</span>--%>
<%--                    </div>--%>
<%--                    <div class="col-md-2">--%>
<%--                        <span class="info">Ajax</span>--%>
<%--                        <span class="info">Kaptcha-2.3.2</span>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
        </div>
        <div class="welcome-edge col-lg-3">
            <!--最新留言-->
            <div class="panel panel-default comment-panel">
                <div class="panel-header">最新反馈</div>
                <div class="panel-body">
                    <div class="commentbox">
                        <ul class="commentList">
                            <c:forEach items="${newFeedBack}" var="feed">
                                <li class="item cl">
                                    <a href="#">
                                        <i class="avatar size-L radius">
                                            <img alt=""
                                                 src="${pageContext.request.contextPath}/statics/admin/images/tx.png">
                                        </i>
                                    </a>
                                    <div class="comment-main">
                                        <header class="comment-header">
                                            <div class="comment-meta">
                                                <a class="comment-author" href="#">
                                                    <b style="color: red">${feed.name}</b>
                                                </a> 反馈于 <br>
                                                <time title="${feed.feedbackList.get(0).submitTime}"
                                                      datetime="${feed.feedbackList.get(0).submitTime}">
                                                        ${feed.feedbackList.get(0).submitTime}
                                                </time>
                                            </div>
                                        </header>
                                        <div class="comment-body">
                                            <p> ${feed.feedbackList.get(0).details} </p>
                                        </div>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                    <div id="pagesbox" style="text-align: center;padding-top: 5px;"></div>
                </div>
            </div>
            <!--联系-->
            <div class="panel panel-default contact-panel">
                <div class="panel-header">联系我们</div>
                <div class="panel-body" style="text-align: center">
                    <p>微信&nbsp;&nbsp;&nbsp;&nbsp;XXXXXXXXXXX</p>
                    <p>Q&nbsp;Q&nbsp;&nbsp;&nbsp;&nbsp;XXXXXXXXXXX</p>
                    <p>电话&nbsp;&nbsp;&nbsp;&nbsp;XXXXXXXXXXX</p>
                    <p>传真&nbsp;&nbsp;&nbsp;&nbsp;XXXXXXXXXXX</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/statics/admin/layui/layui.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/statics/admin/lib/echarts/echarts.js"></script>
<script type="text/javascript">
    var userCount = [];
    var feedbackCount = [];
    var timeArray = [];
    for (var i = 0; i < 7; i++) {
        timeArray.push(getBeforeDate(i));
    }
    //数组倒序
    timeArray = timeArray.reverse();

    window.onload = function (ev) {
        $.ajax({
            url: "${pageContext.request.contextPath}/admin/getCountForTime.do",
            type: "post",
            data: JSON.stringify(timeArray),
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                userCount = data.slice(0, 7);//获取前7个元素
                feedbackCount = data.slice(7);//获取7-最后的元素
            }
        });
        layui.use(['layer', 'jquery'], function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            //图表
            var myChart;
            require.config({
                paths: {
                    echarts: '${pageContext.request.contextPath}/statics/admin/lib/echarts'
                }
            });
            require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line',
                    'echarts/chart/map'
                ],
                function (ec) {
                    //--- 折柱 ---
                    myChart = ec.init(document.getElementById('chart'));
                    myChart.setOption(
                        {
                            title: {
                                text: "数据统计",
                                textStyle: {
                                    color: "rgb(85, 85, 85)",
                                    fontSize: 18,
                                    fontStyle: "normal",
                                    fontWeight: "normal"
                                }
                            },
                            tooltip: {
                                trigger: "axis"
                            },
                            legend: {
                                data: ["注册用户数", "反馈"],
                                selectedMode: false,
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {
                                        show: false,
                                        readOnly: true
                                    },
                                    magicType: {
                                        show: false,
                                        type: ["line", "bar", "stack", "tiled"]
                                    },
                                    restore: {
                                        show: true
                                    },
                                    saveAsImage: {
                                        show: true
                                    },
                                    mark: {
                                        show: false
                                    }
                                }
                            },
                            calculable: false,
                            xAxis: [
                                {
                                    type: "category",
                                    boundaryGap: false,
                                    data: timeArray
                                }
                            ],
                            yAxis: [
                                {
                                    type: "value"
                                }
                            ],
                            grid: {
                                x2: 30,
                                x: 50
                            },
                            series: [
                                {
                                    name: "注册用户数",
                                    type: "line",
                                    smooth: true,
                                    itemStyle: {
                                        normal: {
                                            areaStyle: {
                                                type: "default"
                                            }
                                        }
                                    },
                                    data: userCount
                                },
                                {
                                    name: "反馈",
                                    type: "line",
                                    smooth: true,
                                    itemStyle: {
                                        normal: {
                                            areaStyle: {
                                                type: "default"
                                            },
                                            color: "rgb(110, 211, 199)"
                                        }
                                    },
                                    data: feedbackCount
                                }
                            ]
                        }
                    );
                }
            );
            $(window).resize(function () {
                myChart.resize();
            })
        });
    };

</script>
</body>
</html>
